<!DOCTYPE html>
<script src="../include.js"></script>
<div contenteditable="true">
    <span>foobar</span>
    <ul>
        <li>foo</li>
        <li>bar</li>
        <li>baz</li>
    </ul>
</div>
<script>
    test(() => {
        const selection = getSelection();

        const reportSelection = () => {
            if (selection.rangeCount === 0) {
                println('No range.');
                return;
            }
            const range = selection.getRangeAt(0);
            println(`${range.startContainer.nodeName} ${range.startOffset} - ${range.endContainer.nodeName} ${range.endOffset}`);
        };

        reportSelection();

        let divElm = document.querySelector('div');
        let range = document.createRange();
        range.setStart(divElm, 0);
        range.setEnd(divElm, 0);
        selection.addRange(range);

        reportSelection();

        // Perform selectAll
        document.execCommand('selectAll');
        reportSelection();

        // Report whether command is enabled and make sure it does not crash
        const documents = [
            document,
            new Document(),
            document.implementation.createHTMLDocument(),
        ];
        for (const doc of documents) {
            try {
                println(doc.queryCommandEnabled('selectAll'));
                doc.execCommand('selectAll');
            } catch (e) {
                println(`queryCommandEnabled threw exception of type: ${e.name}`);
            }
        }
        println('Did not crash!');
    });
</script>
